import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
// import ContactSection from '../../ch/sections/ContactSection.vue'

<Meta title="Sections/Content/Date Box" />

export const Template = () => ({
  props: [],
  // components: { ContactSection },
  template: `
    <div class="box">
      <h2 class="sr-only">Event Date</h2>
      <div class="date" lang="de">
        <div class="date__wrapper">
          <div class="date__day">10</div>
          <div class="date__month">Apr</div>
        </div>
        <div class="date__separator">–</div>
        <div class="date__wrapper">
          <div class="date__day">11</div>
          <div class="date__month">Apr</div>
          <div class="date__year">2023</div>
        </div>
      </div>
      <div class="hours">
        Friday 18:00 – 21:00<br />
        Saturday 10:00 – 17:00
      </div>
    </div>
  `,
})

# Date box

This component displays the date of an event. It is used in the <a href="?path=/docs/pages-detail-page-event--example">Detail Event Page</a>

## Use Case 1
1 Event that goes over at least 2 days and you can't book single days, but only all**

<Canvas>
  <div class="box">
    <h2 class="sr-only">Event Date</h2>
    <div class="date" lang="de">
      <div class="date__wrapper">
        <div class="date__day">10</div>
        <div class="date__month">Apr</div>
      </div>
      <div class="date__separator">–</div>
      <div class="date__wrapper">
        <div class="date__day">11</div>
        <div class="date__month">Apr</div>
        <div class="date__year">2023</div>
      </div>
    </div>
    <div class="hours">
      Friday 18:00 – 21:00<br />
      Saturday 10:00 – 17:00
    </div>
  </div>
</Canvas>

Display the year of the first date only if it is different from the year of the second date:

<Canvas>
  <div class="box">
    <h2 class="sr-only">Event Date</h2>
    <div class="date" lang="de">
      <div class="date__wrapper">
        <div class="date__day">30</div>
        <div class="date__month">Dez.</div>
        <div class="date__year">2023</div>
      </div>
      <div class="date__separator">–</div>
      <div class="date__wrapper">
        <div class="date__day">1</div>
        <div class="date__month">Jan.</div>
        <div class="date__year">2024</div>
      </div>
    </div>
    <div class="hours">
      Thursday 18:00 – 21:00<br />
      Friday 18:00 – 02:00<br />
      Saturday 14:00 – 17:00
    </div>
  </div>
</Canvas>

## Use Case 2
1 Event within range 00:00 - 24:00

<Canvas>
  <div class="box">
    <h2 class="sr-only">Event Date</h2>
    <div class="date" lang="de">
      <div class="date__wrapper">
        <div class="date__day">16</div>
        <div class="date__month">Apr</div>
        <div class="date__year">2023</div>
      </div>
    </div>
    <div class="hours">
      Friday 09:30 – 16:00
    </div>
  </div>
</Canvas>

## Use Case 3
1 event, different dates, different time-slots, different locations

<Canvas>
  <div class="box">
    <h2 class="sr-only">Event Date</h2>
    <div class="date" lang="de">
      <div class="date__wrapper">
        <div class="date__day">16</div>
        <div class="date__month">Apr</div>
        <div class="date__year">2023</div>
      </div>
    </div>
    <div class="hours">
      Friday 09:30 – 16:00
    </div>
  </div>
</Canvas>

<Canvas>
  <div class="box">
    <h2 class="sr-only">Event Date</h2>
    <div class="date" lang="de">
      <div class="date__wrapper">
        <div class="date__day">23</div>
        <div class="date__month">Apr</div>
        <div class="date__year">2023</div>
      </div>
    </div>
    <div class="hours">
      Friday 09:30 – 16:00
    </div>
  </div>
</Canvas>

